<template>
  <h1>{{ msg }}</h1>
  <test />

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank"
      >Vite Documentation</a
    >
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="state.count++">count is: {{ state.count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>

  <button @click="clickEmit">派发事件</button>
</template>

<script setup>
import { defineProps, reactive, defineEmit, useContext } from "vue";
// 1. 直接导入组件
import Test from "components/Test.vue";

// 2. 属性定义
const props = defineProps({
  msg: String,
});

console.log(props);

// 3. 定义事件
// 定义一个名字叫myClick的派发事件
const emit = defineEmit(["myClick"]);

// 4. 获取上下文
const ctx = useContext();
console.log(ctx, "ctx");
ctx.expose({
  someMethod() {
    console.log("someMethod");
  },
});

const clickEmit = () => {
  // 点击按钮，触发一个名称叫myClick的派发事件
  // emit('myClick')
  ctx.emit("myClick");
};

const state = reactive({ count: 0 });

// 请求mock数据

fetch("/api/getDataList")
  .then((res) => res.json())
  .then((data) => {
    console.log(data, "data");
  });
</script>
